<template>
  <div>
    <b-carousel
      id="carousel"
      :interval="40000"
      controls
      indicators
      fade
      background="#ababab"
      img-width=""
      img-height="100%"
      style="text-shadow: 1px 1px 2px #333;"
    >
      <b-carousel-slide
        v-for="(item, index) of slides"
        :key="index"
      >
        <div
          id="swapper1"
          v-show="index == 0"
        >
          <b-jumbotron>

            <h1>{{$t('welcome.welcome')}}</h1>

            <p>{{$t('welcome.docs')}}</p>

            <hr class="my-4">

            <p>{{$t('welcome.next')}}</p>

          </b-jumbotron>
        </div>
        <template v-slot:img>
          <img
            class="d-block class-name"
            width="1024"
            :src="item.src"
            alt="image slot"
          >
        </template>
      </b-carousel-slide>
    </b-carousel>
  </div>
</template>
  
<script>
import pic1 from "../../assets/index/img1.jpg"
import pic2 from "../../assets/index/img2.jpg"

export default {
  name: 'index',
  data () {
    return {
      langs: ['en', 'cn', 'kr'],
      slides: [
        { src: pic1, title: "标题1", text: "text1" },
        { src: pic2, title: "标题1", text: "text1" },
      ]
    }
  }
}
</script>

<style scoped>
.class-name {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}
#swapper1 {
  width: 75%;
  position: relative;
  opacity: 75%;
}
</style>
  
 